<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../build/react/umd/react.development.js"></script>
    <script src="../build/react-dom/umd/react-dom.development.js"></script>
    <script src="../build/babel/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <!-- https://reactjs.org/docs/refs-and-the-dom.html#callback-refs -->
    <script type="text/babel">
      class SForm extends React.Component {
        constructor(props) {
          super(props);
          this.name = React.createRef();
          this.telphone = React.createRef();
          
          this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
          var obj ={name:this.name.current.value,telphone:this.telphone.current.value};
          alert(JSON.stringify(obj,null,2));
        }

        render() {
          return (
            <div>
              name:<input type="text" ref={this.name} value="Alice"/><br/>
              telphone:<input type="telphone" ref={this.telphone}  value="123456" /><br/>
              <input type="button" value="Show Values" onClick={this.handleClick} />
            </div>
          );
        }
      }
      ReactDOM.render(<SForm />,document.getElementById("root"));
    </script>
</body>
</html>
